<template>
  <div class="progress-home-container page-common-layout">
    <div class="progress-header-container">
      <a-tree-select
        v-model="tenantCode"
        treeNodeFilterProp="title"
        show-search
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="请选择"
        searchPlaceholder="请输入"
        tree-default-expand-all
        :replaceFields="{
          children: 'child',
          title: 'orgName',
          key: 'id',
          value: 'orgCode',
        }"
        :tree-data="treeData"
        @change="tenantChange"
      >
      </a-tree-select>
    </div>
    <div class="progress-body-container">
      <components
        v-if="componentVisible"
        :is="componentKey"
        :visible="componentVisible"
        :treeItem="treeItem"
      ></components>
    </div>
  </div>
</template>

<script>
//企业
import enterpriseStatistics from "./components/enterpriseStatistics";
//项目
import projectStatistics from "./components/projectStatistics";
import { getProListTreeByQX } from "@/api/common";
export default {
  components: {
    enterpriseStatistics,
    projectStatistics,
  },
  data() {
    return {
      // 组件页面
      componentKey: "enterpriseStatistics",
      componentVisible: false,
      tenantCode: undefined,
      treeData: [],
      treeItem: {},
    };
  },
  mounted() {
    this.getProjectTreeData();
  },
  methods: {
    //查询项目列表-树形
    getProjectTreeData() {
      return new Promise((resolve, reject) => {
        getProListTreeByQX()
          .then((res) => {
            this.treeData = res?.data ?? [];
            this.tenantCode = this.treeData?.[0]?.orgCode ?? undefined;
            this.treeItem = this.treeData?.[0] ?? {};
            resolve();
          })
          .catch((_) => {
            this.tenantCode = undefined;
            this.treeItem = {};
            this.treeData = [];
            reject();
          })
          .finally((_) => {
            this.componentVisible = true;
          });
      });
    },

    tenantChange(value, label, extra) {
      this.treeItem = extra.triggerNode.dataRef;
      let { isProject = false } = extra.triggerNode.dataRef;
      this.componentVisible = false;
      //企业级
      if (!isProject) {
        setTimeout((_) => {
          this.componentKey = "enterpriseStatistics";
          this.componentVisible = true;
        }, 300);
      }
      //项目级
      else {
        setTimeout((_) => {
          this.componentKey = "projectStatistics";
          this.componentVisible = true;
        }, 300);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.progress-home-container {
  display: flex;
  flex-direction: column;
  .progress-header-container {
    background-color: @base-bg-color;
    padding: 10px 20px;
    height: 56px;
    /deep/.ant-select {
      width: 375px;
      font-size: 18px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: bold;
      color: @title-color;
      .ant-select-selection {
        border: 0;
        box-shadow: none;
      }
      .ant-select-arrow-icon {
        color: @title-color;
      }
    }
  }
  .progress-body-container {
    flex: 1;
    overflow: hidden;
  }
}
</style>
